<template>

    <div class="regMain">
        <!--新增课程 模态框-->
        <el-dialog
                class="dialog-center"
                :title="addFrom.id?'修改课程':'新增课程'"
                :visible.sync="addFromVisible"
                :close-on-click-modal="false"
                width="30%">
            <el-form :model="addFrom" :rules="rules" ref="addFrom" label-width="100px">
                <el-form-item label="课程名称" prop="courseName" style="text-align:left">
                    <el-input v-model="addFrom.courseName" size="mini" style="width:260px;"
                              placeholder="课程名称"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="classes" style="text-align:left">
                    <el-select v-model="addFrom.classes" placeholder="请选择班级" size="mini" style="width:260px;">
                        <el-option :label="c.className" :value="c.id" v-for="c in classOptions" :key="c.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业" prop="proId" style="text-align:left">
                    <el-select v-model="addFrom.proId" placeholder="请选择行业" size="mini" style="width:260px;">
                        <el-option :label="io.name" :value="io.id" v-for="io in industryOptions"
                                   :key="io.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课时" prop="classNum" style="text-align:left">
                    <el-select v-model="addFrom.classNum" placeholder="请选择课时" size="mini" style="width:260px;">
                        <el-option :label="`${item}课时`" :value="item" v-for="item in 50" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词" prop="label" style="text-align:left">
                    <el-input v-model="addFrom.label" size="mini" style="width:260px;"
                              placeholder="多个关键字请用#分割，如：标签1#标签2"></el-input>
                </el-form-item>
                <el-form-item label="班级人数" prop="capacity" style="text-align:left">
                    <el-input v-model="addFrom.capacity" size="mini" style="width:260px;"></el-input>
                </el-form-item>
                <el-form-item label="开课时间" prop="courseTime" style="text-align:left">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addFrom.courseTime" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="课程封面" prop="img" style="text-align:left">
                    <el-upload
                            ref="uploadCourseImg"
                            :action="baseApiUrl"
                            :before-upload="beforeUpload"
                            :on-success="createCourseSuccess"
                            :on-remove="handleRemove"
                            :limit="1"
                            :on-exceed="handlePictureCardPreview"
                            list-type="picture-card">
                        <el-image :src="baseImgUrl+addFrom.img" v-if="addFrom.isReUploadImg && addFrom.img"
                                  style="height: 100%"></el-image>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div align="center">
                <el-button type="primary" @click="submitForm('addFrom')" size="medium">{{addFrom.id?'提交修改':'立即创建'}}
                </el-button>
                <el-button @click="resetForm('addFrom')">重置</el-button>
            </div>

        </el-dialog>
        <!--编辑 模态框-->
        <el-dialog
                class="dialog-center"
                :center="false"
                title="编辑课时"
                :visible.sync="editCourseTimeDialog.visible"
                width="30%">
            <el-form :model="courseTimeForm" ref="courseTimeForm" label-width="100px">
                <el-form-item label="选择课时" prop="id" style="text-align:left">
                    <el-select v-model="courseTimeForm.id" placeholder="请选择课时" size="mini" style="width: 80%">
                        <el-option
                                v-for="ct in editCourseTimeDialog.courseTimeLists"
                                :label="getCourseTImeStatus(ct)"
                                :value="ct.id"
                                :key="ct.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传视频" prop="url" style="text-align:left">
                    <el-upload
                            style="width: 80%"
                            :action="baseApiUrl"
                            accept=".mp4,.3gp,.avi,.rmvb,.mkv,.wmv"
                            :before-upload="courseTimeBeforeUpload"
                            :on-success="createcourseTimeSuccess"
                            :limit="1"
                            :on-exceed="courseTimeOnExceed"
                            list-type="text">
                        <el-button type="success" size="mini">选择视频</el-button>
                    </el-upload>
                </el-form-item>

                <el-form-item label="课程介绍" prop="introduce" style="text-align:left">
                    <el-input
                            type="textarea"
                            :rows="2"
                            style="width: 80%"
                            v-model="courseTimeForm.introduce">
                    </el-input>
                </el-form-item>
            </el-form>
            <div align="center">
                <el-button type="primary" @click="editSubmitForm()"
                           size="small"
                           :disabled="!courseTimeForm.id|| !courseTimeForm.url || !courseTimeForm.introduce">保存
                </el-button>
            </div>
        </el-dialog>
        <el-row type="flex" justify="start">
            <el-col :span="24" style="text-align:left">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="专业名称">
                        <el-select v-model="searchForm.proId" placeholder="专业名称" size="mini"
                                   @change="conditionChange()">
                            <el-option label="全部" :value="null"></el-option>
                            <el-option
                                    v-for="item in industryOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级人数">
                        <el-select v-model="classNumSection" placeholder="班级名称" size="mini" @change="conditionChange()">
                            <el-option
                                    v-for="(item,index) in classNumOption"
                                    :key="index"
                                    :label="item.label"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="addOneCourse()">新增
                        </el-button>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-input placeholder="输入关键字查询" v-model="searchForm.label" size="mini"
                                  style="margin-top:6px;float:right">
                            <el-button slot="append" icon="el-icon-search" @click="searchByLabelChange()"
                                       :disabled="!searchForm.label"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <!--                    <el-table-column-->
                    <!--                            type="selection"-->
                    <!--                            width="55">-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                            label="序号"
                            type="index"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="courseName"
                            label="名称"
                            width="auto"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="proName"
                            label="专业"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span :class="getStatusCss(scope.row.status)">{{getStatusLabel(scope.row.status)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="发布时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="capacity"
                            label="班级人数"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="课时"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.classNum}}课时
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="courseTime"
                            label="开课时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑课时
                            </el-button>
                            <el-button size="mini" type="warning" @click="modifyCourse(scope.row)">修改
                            </el-button>
                            <el-button size="mini" type="danger" @click="delCourse(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="t-a-c m-t-5">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script src="./classManagement.js"></script>
<style lang="scss" src="./classManagement.scss"></style>